<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <!-- 下边这些dns-prefetch 是为了实现DNS预解析的 -->
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://webapi.amap.com">
    <link rel="dns-prefetch" href="https://restapi.amap.com">
    <link rel="dns-prefetch" href="https://vdata.amap.com">
    <link rel="dns-prefetch" href="https://vdata01.amap.com">
    <link rel="dns-prefetch" href="https://vdata02.amap.com">
    <link rel="dns-prefetch" href="https://vdata03.amap.com">
    <link rel="dns-prefetch" href="https://vdata04.amap.com">
    <link rel="dns-prefetch" href="https://sdf.amap.com">
    <link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
    <link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
    <link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
    <link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
    <link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
    <link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
    <link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
    <link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
    <!-- end -->
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/icon.css">
    <link rel="stylesheet" href="../static/css/header.css">
    <link rel="stylesheet" href="../static/css/EventStudy.css">
    <!-- 引入高德地图的JavaScript API并定义版本号和插件 这里需要使用在高德地图开发者平台申请的 ak -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=416d4bc4ce399e8fc01a102039def8ce&plugin=AMap.Scale,AMap.ToolBar"></script>
    <script type="text/javascript" src="../static/js/echarts.js"></script>
    <script type="text/javascript" src="../static/js/echarts-extension-amap.min.js"></script>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/echarts-wordcloud.js"></script>
    <script src="../static/js/vintage.js"></script>
    <script type="module" src="../static/js/eventstudy.js"></script>
    <!-- <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
    </script> -->
    <title>{{name}}</title>
</head>

<body>
    <div class="header">
        <div class="usercenter"></div>
        <div class="main">
            <ul>
                <li id="dataset">数据</li>
                <li class="active" id="eventstudy">事件分析</li>
            </ul>
        </div>
    </div>
    <div class="box">
        <div class="main">
            <div class="analytic-card summary-card">
                <div class="analytic-title">事件概括</div>
                <div class="border"></div>
                <div class="analytic-content">
                    <p class="summary-text"></p>
                </div>
            </div>
            <div class="analytic-card development-card">
                <div class="analytic-title">发展趋势</div>
                <div class="border"></div>
                <!-- <div class="analytic-content">
                    <p>在舆情发展趋势中，该事件全网声量最高峰出现在2022年01月05日，共产生353条舆情信息，其中微信平台最为突出，最高达到231条传播量，成为该事件的主要传播媒体。</p>
                </div> -->
                <div class="analytic-content">
                    <div class="development-chart" style="width: 100%;height: 500px;"></div>
                </div>
            </div>
            <!-- 调性分析 -->
            <!-- <div class="analytic-card emotion-card">
                <div class="analytic-title">调性分析</div>
                <div class="border"></div>
                <div class="analytic-content">
                    <p>在事件发展进程中，共监测到正面信息250条（占比12.75%），负面信息64条（占比3.26%），中性信息1647条（占比83.99%），中性信息占据比例最大。</p>
                </div>
                <div class="analytic-content" style="display: flex;">
                    <div class="flex-1" style="flex: 1;">
                        <div class="chart-title">倾向性趋势</div>
                        <div class="emotion-chart" style="width: 100%;height: 400px;border: 1px solid pink;"></div>
                    </div>
                    <div class="flex-1" style="flex: 1;">
                        <div class="pie-title">倾向性分布</div>
                        <div class="emotion-pie" style="width: 100%;height: 400px;border: 1px solid red;"></div>
                    </div>
                </div>
            </div> -->
            <div class="analytic-card wordcloud-card">
                <div class="analytic-title">关键词云</div>
                <div class="border"></div>
                <div class="analytic-content" style="display: flex;">
                    <div class="flex-1" style="flex: 7;">
                        <div class="wordcloud-chart" style="width: 100%;height: 400px;"></div>
                    </div>
                    <div class="flex-1" style="height: 400px;flex: 3;display: flex;flex-direction: column;">
                        <div class="cloud-list-title" style="flex: 1;">关键词排行</div>
                        <div class="wordcloud-list" style="width: 100%;flex: 11;padding: 0 10px;">
                            <table class="table table-hover" style="table-layout: fixed;">
                                <thead>
                                    <tr>
                                        <th class="order col-sm-2">排序</th>
                                        <th class="keyword col-sm-6">关键词</th>
                                        <th class="frequence col-sm-4">词频</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="analytic-card weibosummary-card">
                <div class="analytic-title">微博分析概括</div>
                <div class="border"></div>
                <div class="analytic-content">
                    <p>事件在微博传播过程中，共监测到微博74条，其中正面4条（占比5.41%），负面微博24条（占比32.43%），中性微博46条（占比62.16%），中性微博占比最高。网民言论主要来自个人大V用户7个，其余言论来自政府0个、企业4个、媒体0个、普通用户49个。</p>
                </div>
            </div>
            <div class="analytic-card authentification-card">
                <div class="analytic-title">用户认证</div>
                <div class="border"></div>
                <div class="analytic-content" style="display: flex;">
                    <div class="flex-1" style="flex: 1;">
                        <!-- 饼状图 -->
                        <div class="authentification-pie" style="width: 100%;height: 400px;"></div>
                    </div>
                    <div class="flex-1" style="flex: 1;">
                        <div class="authentification-list-title" style="height: 25px;">影响力排行</div>
                        <div class="authentification-list">
                            
                        </div>
                        <div class="authentification-tab">
                            <div id="type_1" class="tab-box active"><i class="linxing"></i><span>政府(蓝V)</span></div>
                            <div id="type_2" class="tab-box"><span>企业(蓝V)</span></div>
                            <div id="type_3" class="tab-box"><span>媒体(蓝V)</span></div>
                            <div id="type_9" class="tab-box"><span>其他(蓝V)</span></div>
                            <div id="type_0" class="tab-box tab-box-orange"><span>橙V</span></div>
                            <div id="type_10" class="tab-box tab-box-normal"><span>普通用户</span></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="analytic-card weibotype-card">
                <div class="analytic-title">微博类型</div>
                <div class="border"></div>
                <div class="analytic-content">
                    <p class="weibotype-text"></p>
                </div>
                <div class="analytic-content" style="display: flex;">
                    <div class="flex-1" style="flex: 1;">
                        <div class="chart-title">博文发展趋势</div>
                        <div class="weibotype-chart" style="width: 100%;height: 400px;"></div>
                    </div>
                    <div class="flex-1" style="flex: 1;">
                        <div class="pie-title">博文类型占比</div>
                        <div class="weibotype-pie" style="width: 100%;height: 400px;"></div>
                    </div>
                </div>
            </div>

            <div class="analytic-card location-card">
                <div class="analytic-title">博主地域</div>
                <div class="border"></div>
                <div class="analytic-content">
                    <p class="location-text"></p>
                </div>
                <div class="analytic-content" style="display: flex;">
                    <div class="flex-1" style="flex: 7;">
                        <div class="location-chart" id="echarts-amap" style="width: 100%;height: 500px;overflow: hidden;"></div>
                    </div>
                    <div class="flex-1" style="height: 500px; flex: 3;display: flex;flex-direction: column;">
                        <div class="location-list-title" style="padding-left: 10px;font-size: 20px;flex: 1;">top10</div>
                        <div class="location-list" style="width: 100%;flex: 11;padding: 0 10px;">
                            <table class="table table-hover" style="table-layout: fixed;height: 100%;">
                                <thead>
                                    <tr>
                                        <th class="order col-sm-2">排序</th>
                                        <th class="keyword col-sm-6">省份</th>
                                        <th class="frequence col-sm-4">人数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
